import React from 'react'
import { Toast,NavBar  } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import "../../scss/jjt/Reservation.scss"
import { Typography } from 'react-vant';
import {  Steps } from 'react-vant';
import IconFont from "../publics/JjtIcon";
import { useSelector } from 'react-redux';
import axios from 'axios';
import { useEffect } from 'react';
//预约记录
export default function Reservation() {
    let navigate = useNavigate();
    let item = useSelector((state) => state.Num.item);
    let [dong,setDong] = React.useState({})
    // console.log(item,111);
    let getfangdong = async () => {
        let {data} = await axios.get("http://localhost:3000/sdk/fangdong",{params:{_id:item.uid}})
        console.log(data.fangdong,111);
        setDong(data.fangdong)
    }
    useEffect(()=>{
        getfangdong()
    },[])
  return (
    <div className='reservation'>
        <div className='reservation1'>
            <NavBar
            title="预约看房"
            // leftText="返回"
            // rightText={<SettingO/>}
            onClickLeft={() => {navigate("/appointment")}}
            onClickRight={() => Toast('按钮')}
            />
        </div>
        <div className='reservation2'>
            <div className='reservation2con1'>
                <img src={require("../../staticfile/userimg.jpg")} alt="" />
            </div>
            <div className='reservation2con2'>
                <div className='reservation2con2p1'>
                    <Typography.Text ellipsis className='reservation2con2p1con'>{item.hid.classfy}|{item.hid.describe}</Typography.Text>
                </div>
                <p className='reservation2con2p2'>
                    <span>{item.hid.house_type.split("/")[0]}·{item.hid.house_area}m²·{item.hid.plot}</span>
                </p>
                <p className='reservation2con2p3'>
                    <span>{item.hid.price}元/月</span>
                </p>
            </div>
        </div>
        <div className='reservation3'>
            <div className='reservation3left'>
                <img src="./logo192.png" alt="" />
                <div className='reservation3div'>
                    <p className='reservation3divp1'>{dong.name}{dong.gender}士</p>
                    <p className='reservation3divp2'>个人房东</p>
                </div>
            </div>
            <div className='reservation3right'>
                <span>70分</span>
            </div>
        </div>
        <div className='reservation4'></div>
        <div className='reservation5'>
            <p className='reservation5p'>预约信息</p>
            {item.appointstatus!==2&&<div className='reservation5con'>
                <div className='reservation5conleft'>
                <IconFont type={"icon-wancheng"} style={{fontSize:"21px",position:"relative",zIndex:"5"}} className={item.time4?"iconact":""}></IconFont>
                </div>
                <div  className='reservation5conright'>
                    <p className='reservation5conright1'>
                        预约已完成
                        
                    </p>
                    <p className='reservation5conright2'>
                    {item.time4?item.start_time.split("T")[0]:"------------"}
                        
                    </p>
                    <p className='reservation5conright3'>感谢您使用客心app</p>
                </div>
            </div>}
            
            {item.appointstatus!==2&&<div className='reservation5con'>
                <div className='reservation5conleft'>
                <IconFont type={"icon-fangchan-"} style={{fontSize:"25px",position:"relative",zIndex:"5"}} className={item.time3?"iconact":""}></IconFont>
                </div>
                <div  className='reservation5conright'>
                    <p className='reservation5conright1'>
                        已看房
                        
                    </p>
                    <p className='reservation5conright2'>
                    {item.time3?item.start_time.split("T")[0]:"------------"}
                        
                    </p>
                    <p className='reservation5conright3'>您已到达房源看房</p>
                </div>
            </div>}
            
            {
                item.appointstatus===2?
                <div className='reservation5con'>
                <div className='reservation5conleft'>
                <IconFont type={"icon-accepted-task"} style={{fontSize:"20px",position:"relative",zIndex:"5"}} className={item.time2?"iconact":""}></IconFont>
                </div>
                <div  className='reservation5conright'>
                    <p className='reservation5conright1'>
                        已拒绝
                        
                    </p>
                    <p className='reservation5conright2'>
                        {item.time2?item.start_time.split("T")[0]:"------------"}
                        
                    </p>
                    <p className='reservation5conright3'>房东已拒绝预约</p>
                </div>
            </div>
                :
                <div className='reservation5con'>
                <div className='reservation5conleft'>
                <IconFont type={"icon-accepted-task"} style={{fontSize:"20px",position:"relative",zIndex:"5"}} className={item.time2?"iconact":""}></IconFont>
                </div>
                <div  className='reservation5conright'>
                    <p className='reservation5conright1'>
                        已接受
                        
                    </p>
                    <p className='reservation5conright2'>
                        {item.time2?item.start_time.split("T")[0]:"------------"}
                        
                    </p>
                    <p className='reservation5conright3'>房东已接受预约，请按约看房</p>
                </div>
            </div>
            }
            
            <div className='reservation5con'>
                <div className='reservation5conleft'>
                <IconFont type={"icon-faqiyuyue1"} style={{fontSize:"25px",position:"relative",zIndex:"5"}} className={item.start_time?"iconact":""}></IconFont>
                </div>
                <div  className='reservation5conright'>
                    <p className='reservation5conright1'>
                        发起预约
                        
                    </p>
                    <p className='reservation5conright2'>
                        {item.start_time.split("T")[0]}
                        
                    </p>
                    <p className='reservation5conright3'>看房时间</p>
                </div>
            </div>
            <div className='style'></div>
            <div className='reservation5bot'>
                <div className='reservation5botleft'>
                <IconFont type={"icon-yuyue1"} style={{fontSize:"35px",color:"gray"}}></IconFont>
                <p>再次预约</p>
                </div>
                <div className='reservation5botright'>
                    <button>确认已看房</button>
                </div>
            </div>
        </div>
    </div>
  )
}
